﻿<template v-if="catalog.Model !== null">
    <template v-if="catalog.Model.PagingFilteringContext.SpecificationFilter.Enabled">
        <div id="block-product-spec-filter" class="block product-filter product-spec-filter">
            <h2 class="h5">
                <strong>@Loc["Filtering.SpecificationFilter"]</strong>
            </h2>
            <div class="filter-content viewBox">
                <template v-if="catalog.Model.PagingFilteringContext.SpecificationFilter.NotFilteredItems !== undefined">
                    <div class="available-items">
                        <template v-for="group in catalog.Model.PagingFilteringContext.SpecificationFilter.NotFilteredItems">
                            <div class="col-12 px-0">
                                <ul class="group product-spec-group">
                                    <li class="title">
                                        <h6>{{group[0].SpecificationAttributeName}}</h6>
                                    </li>
                                    <li>
                                        <div class="btn-group-sm d-inline-flex flex-wrap">
                                            <template v-for="spec in group">
                                                <template v-if="spec.SpecificationAttributeOptionColorRgb !== null">
                                                    <button class="btn btn-sm btn-light color-container mb-1 mr-1" @@click="catalog.loadProducts(spec.FilterUrl)">
                                                        <span class="color" :title="spec.SpecificationAttributeOptionName" :style="'background-color:' + spec.SpecificationAttributeOptionColorRgb">&nbsp;</span>
                                                    </button>
                                                </template>
                                                <template v-else>
                                                    <button class="btn btn-sm btn-light mb-1 mr-1" @@click="catalog.loadProducts(spec.FilterUrl)">
                                                        {{spec.SpecificationAttributeOptionName}}
                                                    </button>
                                                </template>
                                            </template>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </template>
                    </div>
                </template>
            </div>
            <template v-if="JSON.stringify(catalog.Model.PagingFilteringContext.SpecificationFilter.AlreadyFilteredItems) !== '{}'">
                <div class="card filtered-items mb-3">
                    <h6 class="h6 card-header">
                        @Loc["Filtering.SpecificationFilter.CurrentlyFilteredBy"]
                    </h6>
                    <div class="card-body">
                        <ul class="p-0 mb-0">
                            <template v-for="group in catalog.Model.PagingFilteringContext.SpecificationFilter.AlreadyFilteredItems">
                                <li class="item">
                                    <div class="mb-2">
                                        <strong>{{group[0].SpecificationAttributeName}}:</strong>
                                    </div>
                                    <div class="d-inline-flex flex-wrap w-100">
                                        <template v-for="spec in group">
                                            <a class="d-flex align-items-center mr-2 mb-2 pb-0" @@click="catalog.loadProducts(spec.FilterUrl)">{{spec.SpecificationAttributeOptionName}}<b-icon class="ml-2 text-danger" icon="x-circle-fill"></b-icon></a>
                                        </template>
                                    </div>
                                </li>
                            </template>
                        </ul>
                        <div class="remove-filter">
                            <button class="btn btn-sm btn-danger" @@click="catalog.loadProducts(catalog.Model.PagingFilteringContext.SpecificationFilter.RemoveFilterUrl)">
                                @Loc["Filtering.SpecificationFilter.Remove"]
                            </button>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </template>
    @*Rating*@
    <template v-if="catalog.Model.PagingFilteringContext.RatingOptions.length > 0">
        <div class="block product-filter product-rating-filter">
            <div class="card mb-3">
                <h6 class="h6 card-header">
                    @Loc["Catalog.Rating"]:
                </h6>
                <div class="card-body">
                    <select class="custom-select form-control" id="rating" name="rating" v-on:change="catalog.setRating($event.target.value)" aria-label="@Loc["Catalog.Rating"]">
                        <template v-for="item in catalog.Model.PagingFilteringContext.RatingOptions">
                            <option :selected="item.Selected" :value="item.Value" :disabled="false">
                                {{item.Text}}
                            </option>
                        </template>
                    </select>
                </div>
            </div>
        </div>
    </template>
</template>